<template>
	<view class="container">
		
		<view class="header">
			<view class="box">
				<view class="arrow" @tap="$back()"><image src="../../static/images/arrow_left.png" mode="aspectFit"></image></view>
				<view class="text f36 cfff">客户选择</view>
				<view class="more" @tap="$open('./editor')"><image src="../../static/images/tb_more.png" mode="aspectFit"></image></view>
			</view>
			
			<view class="search-box">
				<view class="icon">
					<image src="../../static/images/tb_search.png" mode="aspectFit"></image>
				</view>
				<input placeholder="请输入关键词..." placeholder-style="color:#999;"  />
				
			</view>
			
		</view>
			
		<view class="client-list">
			<view class="client-item">
				<view class="pic"><image src="../../static/images/tb_client.png" mode="aspectFit"></image></view>
				<view class="text f30 c333">零售客户（Khoo1）</view>
			</view>
			<view class="client-item">
				<view class="pic"><image src="../../static/images/tb_client.png" mode="aspectFit"></image></view>
				<view class="text f30 c333">零售客户（Khoo1）</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}
	.header{
		background-color: #249AF6;
		padding: 55upx 60upx 15upx 30upx;
		.box{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.arrow{
				image{
					width: 22upx;
					height: 40upx;
				}
			}
			.more{
				image{
					width: 44upx;
					height: 44upx;
				}
			}
		}
		.search-box{
			height: 60upx;
			line-height: 60upx;
			background-color: $white-background;
			border-radius: 30upx;
			display: flex;
			flex-direction: row;
			margin-top: 40upx;
			.icon{
				margin-left: 30upx;
				image{
					width: 31upx;
					height: 28upx;
				}
			}
			input{
				width: 100%;
				box-sizing: border-box;
				padding: 0 25upx;
				height: 60upx;
				line-height: 60upx;
				font-size: 28upx;
				color: #999;
			}
		}
	}
	.client-list{
		margin-top: 20upx;
		.client-item{
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: $white-background;
			padding: 40upx 30upx;
			border-bottom: 2upx #eeeeee solid;
			&:last-child{
				border-bottom: none;
			}
			.pic{
				image{
					width: 44upx;
					height: 44upx;
					margin-right: 35upx;
				}
			}
		}
	}
</style>
